<template>
    <view class="container">
        <u-navbar :is-back="false" :background="{ backgroundColor: 'transparent' }" :border-bottom='false'>
            <view class="f_sb_c p032">
                <u-icon @click="leftBack" name="https://file.tcwang.cc/iconSet/care_back.png" size="64" />
                <view>
                    <u-icon @click="download" name="https://file.tcwang.cc/iconSet/care_download.png" size="64" />
                    <u-icon class="ml36" @click="share" name="https://file.tcwang.cc/iconSet/care_share.png"
                        size="64" />
                </view>
            </view>
        </u-navbar>
        <!-- 生日 -->
        <view class="page">
            <l-painter :board="poster" isCanvasToTempFilePath @success="posterSuccess($event)"
                css="width: 750rpx;height: 100%;" />
        </view>
        <view v-if="0" class="page0">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="text_28_333">成长不期而遇 ，生日如约而至。</view>
                <view class="text_28_333">公司送你一天生日假期与抽奖惊喜，</view>
                <view class="text_28_333">愿新岁的你生活灿烂，事业顺利，</view>
                <view class="text_28_333">梦想成真，我们与你同在！</view>
                <view class="text_28_333">祝你生日快乐！</view>
            </view>
        </view>
        <image v-if="0" class="lucky_draw" src="https://file.tcwang.cc/iconSet/lucky_draw.png" />
        <!-- 入职周年 -->
        <view v-if="0" class="page1">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="ml44 title">一路相伴 感谢有你</view>
                <view class="ml44 subtitle">—— THANK YOU ——</view>
                <view class="ml44 text_28_333">Dear赵敏：</view>
                <view class="ml44 text_28_333">
                    时光悄然流转，祝贺你入职已满三周年！在这三年里，你的努力与贡献有目共睹。公司特意为你准备了一份红包，以此表达对你的感谢与认可。愿你在未来的日子里继续绽放光彩，与公司携手共进，书写更多精彩篇章！我们期待与你一起创造更多美好的回忆和成就！
                </view>
                <view class="ml44 text_28_333">宅喔人事部</view>
                <view class="ml44 text_28_333">2023年12月26日</view>
            </view>
        </view>
        <view v-if="0" class="page2">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="text_content">
                    <view class="text_32_FFF text_bold" style="color: #FFE2AF;">Dear赵敏：</view>
                    <view class="text_28_FFF text_indent">
                        根据您在试用期内的优异工作能力和表现，符合我司职位的要求，现经公司领导批准，同意您的转正，并按照公司相关规定享受正式员工的全部待遇。
                    </view>
                    <view class="text_28_FFF text_indent">
                        希望您再接再厉，与公司共创辉煌！
                    </view>
                    <view class="text_28_FFF">宅喔人事部</view>
                    <view class="text_28_FFF">2023年12月26日</view>
                </view>
            </view>
        </view>
        <view v-if="0" class="page3">
            <view class="content">
                <view class="f_fs_c">
                    <image class="avater_icon" :src="avatar || 'https://file.tcwang.cc/iconSet/avater_icon.png'" />
                    <view class="f_fs_fs f_column ml20">
                        <text class="text_34_333 text_bold">赵明志</text>
                        <text class="text_26_999">TC16959</text>
                    </view>
                </view>
                <view class="title">新婚快乐</view>
                <view class="text_28_333">
                    在你新婚的美好时刻，公司全体同仁为你送上最真挚的祝福！愿你的婚姻生活如同璀璨星辰般闪耀，充满着无尽的欢乐与温馨，每一天都洋溢着爱与幸福。
                    公司特意准备了一份红包，以此表达我们对你的深深祝福和关爱，愿这份心意能为你的新婚增添一份喜悦。愿你们的爱情永恒不变，甜蜜美满到永远，携手创造属于你们的幸福未来！
                </view>
                <view class="text_28_333">
                    宅喔全体员工
                    2024.11.28
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import more from './moreCare.js'
export default {
    data() {
        return {
            avatar: '',
            pathObj: {},
            poster: {
                // 页面
                css: {
                    width: "750rpx",
                    height: '100vh',
                    backgroundImage: 'url(https://file.tcwang.cc/iconSet/birth_care.png)',
                },
                views: [{
                    type: "view",
                    css: {
                        transform: 'rotate(-15deg)',
                        marginTop: '444rpx',
                        marginLeft: '226rpx',
                        // background: 'skyblue',
                    },
                    views: [
                        {
                            type: "view",
                            css: {
                                width: "100%",
                                display: 'flex',
                                alignItems: 'center',
                            },
                            views: [
                                {
                                    type: "image",
                                    src: 'https://file.tcwang.cc/iconSet/avater_icon.png',
                                    css: {
                                        width: "110rpx",
                                        height: "110rpx",
                                        borderRadius: '50%',
                                    },
                                },
                                {
                                    type: "view",
                                    css: {
                                        marginLeft: '20rpx',
                                    },
                                    views: [
                                        {
                                            type: "text",
                                            text: '赵明志',
                                            css: {
                                                fontWeight: 'bold',
                                                fontSize: '34rpx',
                                                color: '#333',
                                                lineHeight: '44rpx',
                                                marginBottom: '10rpx'
                                            },
                                        },
                                        {
                                            type: "text",
                                            text: 'TC16959',
                                            css: {
                                                width: "100%",
                                                fontSize: '26rpx',
                                                lineHeight: '36rpx',
                                                color: '#999'
                                            },
                                        },
                                    ]
                                },
                            ]
                        },
                        // <view class="text_28_333">成长不期而遇 ，生日如约而至。</view>
                        // <view class="text_28_333">公司送你一天生日假期与抽奖惊喜，</view>
                        // <view class="text_28_333">愿新岁的你生活灿烂，事业顺利，</view>
                        // <view class="text_28_333">梦想成真，我们与你同在！</view>
                        // <view class="text_28_333">祝你生日快乐！</view>
                        {
                            type: "text",
                            text: '区域总经理',
                            css: {
                                width: "100%",
                                // marginTop: '242rpx',
                                fontWeight: 'bold',
                                fontSize: '28rpx',
                                color: '#000'
                            },
                        },
                        {
                            type: "text",
                            text: '张宇',
                            css: {
                                width: "100%",
                                marginTop: '4rpx',
                                fontWeight: 'bold',
                                fontSize: '26rpx',
                                color: '#000'
                            },
                        },
                        {
                            type: "text",
                            text: '· 黑熊 ·',
                            css: {
                                width: "100%",
                                marginTop: '0rpx',
                                fontSize: '22rpx',
                                color: '#000'
                            },
                        },
                        {
                            type: "text",
                            text: '热烈祝贺张宇',
                            css: {
                                width: "100%",
                                marginTop: '12rpx',
                                fontSize: '28rpx',
                                color: '#000'
                            },
                        },
                        {
                            type: "text",
                            text: '成功晋升鑫苑店-聚火团队',
                            css: {
                                width: "100%",
                                marginTop: '0rpx',
                                fontSize: '24rpx',
                                color: '#000'
                            },
                        },
                        {
                            type: "text",
                            text: '区域总监',
                            css: {
                                fontSize: '32rpx',
                                color: '#000',
                                fontWeight: 'bold',
                                marginTop: '10rpx'
                            },
                        }
                    ],
                },],
            },
        }
    },
    onLoad({ obj }) {
    },
    methods: {
        leftBack() {
            console.log('返回');
            uni.share({
                provider: "weixin",
                scene: "WXSceneTimeline",
                type: 2,
                imageUrl: this.pathObj,
                success: function (res) {
                    // console.log("success:" + JSON.stringify(res));
                    uni.showToast({
                        title: '分享成功'
                    })
                },
                fail: function (err) {
                    // console.log("fail:" + JSON.stringify(err));
                }
            });
            // uni.navigateBack()
        },
        download() {
            console.log('下载');
            console.log('pathObj: ', this.pathObj);
            uni.saveImageToPhotosAlbum({
                filePath: this.pathObj, // 临时文件路径
                success() {
                    console.log('图片已成功保存至相册');
                    uni.showToast({
                        title: '保存成功'
                    })
                },
                fail(err) {
                    console.error('保存图片失败', err);
                }
            });
        },
        share() {
            console.log('分享');
        },
        posterSuccess(e) {
            this.pathObj = e
            uni.hideLoading()
        }
    }
}
</script>

<style lang="scss" scoped>
// @import "@/common/libs/common.scss";

* {
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
    width: 750rpx;
    height: 100vh;

    .slot-wrap {
        background: transparent;
    }

    .lucky_draw {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 200rpx;
        width: 212rpx;
        height: 212rpx;
    }
}


.page3 {
    // background-image: url("https://file.tcwang.cc/iconSet/marriage_care.png");

    .content {
        margin-top: 424rpx;
        margin-left: 90rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .title {
            margin-top: 48rpx;
            font-weight: bold;
            font-size: 56rpx;
            color: #8B6C4C;
            line-height: 66rpx;
            text-align: left;
        }

        .title,
        .text_28_333 {
            width: 578rpx;
        }

        .text_28_333 {
            width: 570rpx;
            overflow-wrap: break-word;
            color: rgba(139, 108, 76, 1);
            font-size: 28rpx;
            line-height: 50rpx;
        }

        .text_28_333 {
            margin-bottom: 60rpx;
            margin-top: 20rpx;
        }

        .text_28_333:last-child {
            line-height: 44rpx;
            margin-top: 0;
            margin-bottom: 0rpx;
            text-align: right;
        }
    }
}

.page,
.page0,
.page1,
.page2,
.page3 {
    position: absolute;
    top: 0;
    width: 750rpx;
    height: 100vh;
    background-image: url("https://file.tcwang.cc/iconSet/marriage_care.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.page0 {
    background-image: url("https://file.tcwang.cc/iconSet/birth_care.png");

    .content {
        // position: absolute;
        transform: rotate(-15deg);
        margin-top: 444rpx;
        margin-left: 226rpx;

        .avater_icon {
            width: 100rpx;
            height: 100rpx;
        }

        .f_fs_c {
            margin-bottom: 36rpx;
        }

        .text_28_333 {
            margin-bottom: 36rpx;
        }
    }
}

.page1 {
    background-image: url("https://file.tcwang.cc/iconSet/entry_anniversary.png");

    .content {
        margin-top: 186rpx;
        margin-left: 62rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .title {
            width: 446rpx;
            height: 64rpx;
            font-weight: 900;
            font-size: 54rpx;
            color: #A3673B;
            line-height: 64rpx;
            margin-top: 86rpx;
        }

        .subtitle {
            width: 320rpx;
            height: 40rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #DAAD8C;
            line-height: 40rpx;
            margin-top: 14rpx;
            margin-bottom: 28rpx;
        }

        .title,
        .subtitle {
            width: 538rpx;
            text-align: center;
        }

        .text_28_333 {
            width: 538rpx;
            margin-bottom: 12rpx;
            line-height: 54rpx !important;
        }

        .text_28_333:not(:nth-child(2)) {
            line-height: 40rpx;
        }

        .text_28_333:nth-last-child(2),
        .text_28_333:last-child {
            text-align: right;
            margin-bottom: 0rpx;
        }

        .ml44 {
            margin-left: 44rpx;
        }
    }
}


.page2 {
    background-image: url("https://file.tcwang.cc/iconSet/conversion_notice.png");

    .content {
        margin-top: 442rpx;
        margin-left: 58rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .text_content {
            transform: rotate(12deg);
            margin-top: 192rpx;
            margin-left: 110rpx;
            width: 538rpx;

            .text_bold {
                margin-bottom: 80rpx;
            }

            .text_indent {
                text-indent: 56rpx;
                margin-bottom: 40rpx;
                line-height: 44rpx;
            }


            .text_28_FFF:nth-last-child(2),
            .text_28_FFF:last-child {
                text-align: right;
                margin-bottom: 10rpx;
                margin-right: 30rpx;
            }
        }
    }
}
</style>